<template>
	<view class="container">
		<!-- 顶部提示 -->
		<view class="header-banner">
			<text class="banner-icon">🐾</text>
			<view class="banner-content">
				<text class="banner-title">我的宠物档案</text>
				<text class="banner-desc">完善档案，让喂养师更了解您的爱宠</text>
			</view>
		</view>

		<!-- 宠物列表 -->
		<view class="pets-list" v-if="pets.length > 0">
			<view 
				class="pet-card" 
				v-for="(pet, index) in pets" 
				:key="pet.id"
				@click="editPet(pet)">
				<image class="pet-avatar" :src="pet.avatar" mode="aspectFill"></image>
				<view class="pet-info">
					<view class="pet-header">
						<text class="pet-name">{{ pet.name }}</text>
						<view class="pet-tags">
							<text class="pet-tag">{{ pet.species }}</text>
							<text class="pet-tag" v-if="pet.gender">{{ pet.gender }}</text>
						</view>
					</view>
					<text class="pet-detail">{{ pet.age }}岁 · {{ pet.breed }}</text>
					<view class="pet-habits" v-if="pet.habits">
						<text class="habit-icon">📋</text>
						<text class="habit-text">{{ pet.habits }}</text>
					</view>
				</view>
				<view class="pet-actions">
					<text class="action-icon" @click.stop="deletePet(pet.id)">🗑️</text>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<text class="empty-icon">🐕</text>
			<text class="empty-text">还没有添加宠物档案</text>
			<text class="empty-hint">添加您的爱宠，开始发布喂养需求吧</text>
		</view>

		<!-- 添加按钮 -->
		<view class="add-btn-wrapper">
			<button class="add-btn" @click="showAddPet">
				<text class="add-icon">+</text>
				<text>添加宠物</text>
			</button>
		</view>

		<!-- 添加/编辑弹窗 -->
		<uni-popup ref="petPopup" type="bottom" background-color="#fff">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">{{ currentPet.id ? '编辑宠物' : '添加宠物' }}</text>
					<text class="close-btn" @click="closePopup">✕</text>
				</view>

				<scroll-view class="form-scroll" scroll-y>
					<!-- 宠物头像 -->
					<view class="form-item">
						<text class="label">宠物照片 <text class="required">*</text></text>
						<view class="avatar-upload">
							<image 
								v-if="currentPet.avatar" 
								class="avatar-preview" 
								:src="currentPet.avatar" 
								mode="aspectFill"
								@click="uploadAvatar"></image>
							<view v-else class="avatar-placeholder" @click="uploadAvatar">
								<text class="upload-icon">📷</text>
								<text class="upload-text">上传照片</text>
							</view>
						</view>
					</view>

					<!-- 宠物名称 -->
					<view class="form-item">
						<text class="label">宠物名称 <text class="required">*</text></text>
						<input 
							class="input" 
							v-model="currentPet.name" 
							placeholder="请输入宠物名称"
							maxlength="20" />
					</view>

					<!-- 宠物种类 -->
					<view class="form-item">
						<text class="label">宠物种类 <text class="required">*</text></text>
						<uni-data-select 
							v-model="currentPet.species" 
							:localdata="speciesOptions"
							placeholder="请选择"
							class="select-input">
						</uni-data-select>
					</view>

					<!-- 品种 -->
					<view class="form-item">
						<text class="label">品种 <text class="required">*</text></text>
						<input 
							class="input" 
							v-model="currentPet.breed" 
							placeholder="如：英国短毛猫、金毛" />
					</view>

					<!-- 性别 -->
					<view class="form-item">
						<text class="label">性别</text>
						<view class="radio-group">
							<view 
								class="radio-item" 
								:class="{active: currentPet.gender === '公'}"
								@click="currentPet.gender = '公'">
								<text class="radio-icon">{{ currentPet.gender === '公' ? '🔘' : '⚪' }}</text>
								<text class="radio-text">公</text>
							</view>
							<view 
								class="radio-item" 
								:class="{active: currentPet.gender === '母'}"
								@click="currentPet.gender = '母'">
								<text class="radio-icon">{{ currentPet.gender === '母' ? '🔘' : '⚪' }}</text>
								<text class="radio-text">母</text>
							</view>
						</view>
					</view>

					<!-- 年龄 -->
					<view class="form-item">
						<text class="label">年龄 <text class="required">*</text></text>
						<uni-data-select 
							v-model="currentPet.age" 
							:localdata="ageOptions"
							placeholder="请选择"
							class="select-input">
						</uni-data-select>
					</view>

					<!-- 是否绝育 -->
					<view class="form-item">
						<text class="label">是否绝育</text>
						<view class="radio-group">
							<view 
								class="radio-item" 
								:class="{active: currentPet.neutered === true}"
								@click="currentPet.neutered = true">
								<text class="radio-icon">{{ currentPet.neutered === true ? '🔘' : '⚪' }}</text>
								<text class="radio-text">已绝育</text>
							</view>
							<view 
								class="radio-item" 
								:class="{active: currentPet.neutered === false}"
								@click="currentPet.neutered = false">
								<text class="radio-icon">{{ currentPet.neutered === false ? '🔘' : '⚪' }}</text>
								<text class="radio-text">未绝育</text>
							</view>
						</view>
					</view>

					<!-- 生活习惯 -->
					<view class="form-item">
						<text class="label">生活习惯</text>
						<textarea 
							class="textarea" 
							v-model="currentPet.habits" 
							placeholder="如：喜欢晒太阳、怕生、每天早晚各喂一次"
							maxlength="200" />
						<text class="char-count">{{ currentPet.habits.length }}/200</text>
					</view>

					<!-- 饮食偏好 -->
					<view class="form-item">
						<text class="label">饮食偏好</text>
						<textarea 
							class="textarea" 
							v-model="currentPet.foodPreference" 
							placeholder="如：喜欢吃鸡肉、不吃鱼、每餐100g猫粮"
							maxlength="200" />
						<text class="char-count">{{ currentPet.foodPreference.length }}/200</text>
					</view>

					<!-- 健康状况 -->
					<view class="form-item">
						<text class="label">健康状况</text>
						<textarea 
							class="textarea" 
							v-model="currentPet.health" 
							placeholder="如：有皮肤病、需要定期吃药"
							maxlength="200" />
						<text class="char-count">{{ currentPet.health.length }}/200</text>
					</view>

					<!-- 特殊注意事项 -->
					<view class="form-item">
						<text class="label">特殊注意事项</text>
						<textarea 
							class="textarea" 
							v-model="currentPet.notes" 
							placeholder="如：怕打雷、不能和其他宠物接触"
							maxlength="200" />
						<text class="char-count">{{ currentPet.notes.length }}/200</text>
					</view>

					<!-- 底部占位 -->
					<view class="bottom-placeholder"></view>
				</scroll-view>

				<!-- 底部按钮 -->
				<view class="popup-footer">
					<button class="cancel-btn" @click="closePopup">取消</button>
					<button class="submit-btn" @click="savePet">保存</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pets: [],
			currentPet: this.getEmptyPet(),
			speciesOptions: [
				{ value: '猫', text: '🐱 猫' },
				{ value: '狗', text: '🐕 狗' },
				{ value: '鸟', text: '🐦 鸟' },
				{ value: '兔', text: '🐰 兔' },
				{ value: '仓鼠', text: '🐹 仓鼠' },
				{ value: '其他', text: '🐾 其他' }
			],
			ageOptions: [
				{ value: 0, text: '0-1岁' },
				{ value: 1, text: '1-2岁' },
				{ value: 2, text: '2-3岁' },
				{ value: 3, text: '3-5岁' },
				{ value: 5, text: '5-8岁' },
				{ value: 8, text: '8岁以上' }
			]
		}
	},
	onLoad() {
		this.loadPets()
	},
	methods: {
		// 获取空宠物对象
		getEmptyPet() {
			return {
				id: null,
				avatar: '',
				name: '',
				species: '',
				breed: '',
				gender: '',
				age: 0,
				neutered: null,
				habits: '',
				foodPreference: '',
				health: '',
				notes: ''
			}
		},

		// 加载宠物列表
		loadPets() {
			// 从本地存储加载
			const storedPets = uni.getStorageSync('pets')
			if (storedPets) {
				this.pets = storedPets
			}
		},

		// 显示添加弹窗
		showAddPet() {
			this.currentPet = this.getEmptyPet()
			setTimeout(() => {
				if (this.$refs.petPopup && typeof this.$refs.petPopup.open === 'function') {
					this.$refs.petPopup.open()
				}
			}, 100)
		},

		// 编辑宠物
		editPet(pet) {
			this.currentPet = { ...pet }
			setTimeout(() => {
				if (this.$refs.petPopup && typeof this.$refs.petPopup.open === 'function') {
					this.$refs.petPopup.open()
				}
			}, 100)
		},

		// 上传头像
		uploadAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.currentPet.avatar = res.tempFilePaths[0]
				}
			})
		},

		// 保存宠物
		savePet() {
			// 验证必填项
			if (!this.currentPet.avatar) {
				uni.showToast({ title: '请上传宠物照片', icon: 'none' })
				return
			}
			if (!this.currentPet.name) {
				uni.showToast({ title: '请输入宠物名称', icon: 'none' })
				return
			}
			if (!this.currentPet.species) {
				uni.showToast({ title: '请选择宠物种类', icon: 'none' })
				return
			}
			if (!this.currentPet.breed) {
				uni.showToast({ title: '请输入品种', icon: 'none' })
				return
			}

			if (this.currentPet.id) {
				// 编辑
				const index = this.pets.findIndex(p => p.id === this.currentPet.id)
				if (index > -1) {
					this.pets.splice(index, 1, { ...this.currentPet })
				}
			} else {
				// 新增
				this.currentPet.id = Date.now()
				this.pets.push({ ...this.currentPet })
			}

			// 保存到本地存储
			uni.setStorageSync('pets', this.pets)

			uni.showToast({
				title: '保存成功',
				icon: 'success'
			})

			this.closePopup()
		},

		// 删除宠物
		deletePet(id) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个宠物档案吗？',
				success: (res) => {
					if (res.confirm) {
						this.pets = this.pets.filter(p => p.id !== id)
						uni.setStorageSync('pets', this.pets)
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}
				}
			})
		},

		// 关闭弹窗
		closePopup() {
			if (this.$refs.petPopup && typeof this.$refs.petPopup.close === 'function') {
				this.$refs.petPopup.close()
			}
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #F0F8FF 0%, #FFF0F5 100%);
	padding: 30rpx;
	padding-bottom: 150rpx;
}

/* 顶部横幅 */
.header-banner {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.3);
}

.banner-icon {
	font-size: 48rpx;
	margin-right: 20rpx;
}

.banner-content {
	flex: 1;
}

.banner-title {
	font-size: 30rpx;
	font-weight: 700;
	color: #FFFFFF;
	display: block;
	margin-bottom: 8rpx;
}

.banner-desc {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
}

/* 宠物列表 */
.pets-list {
	margin-bottom: 30rpx;
}

.pet-card {
	display: flex;
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 25rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.pet-avatar {
	width: 140rpx;
	height: 140rpx;
	border-radius: 20rpx;
	margin-right: 20rpx;
}

.pet-info {
	flex: 1;
}

.pet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10rpx;
}

.pet-name {
	font-size: 32rpx;
	font-weight: 700;
	color: #333333;
}

.pet-tags {
	display: flex;
	gap: 10rpx;
}

.pet-tag {
	font-size: 22rpx;
	color: #FFB6C1;
	background: rgba(255, 182, 193, 0.15);
	padding: 5rpx 15rpx;
	border-radius: 20rpx;
}

.pet-detail {
	font-size: 26rpx;
	color: #666666;
	display: block;
	margin-bottom: 12rpx;
}

.pet-habits {
	display: flex;
	align-items: flex-start;
	background: #F5F5F5;
	border-radius: 15rpx;
	padding: 12rpx 15rpx;
}

.habit-icon {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.habit-text {
	flex: 1;
	font-size: 24rpx;
	color: #666666;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pet-actions {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 15rpx;
}

.action-icon {
	font-size: 36rpx;
	padding: 10rpx;
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 120rpx 40rpx;
}

.empty-icon {
	font-size: 120rpx;
	display: block;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #666666;
	display: block;
	margin-bottom: 15rpx;
}

.empty-hint {
	font-size: 26rpx;
	color: #999999;
}

/* 添加按钮 */
.add-btn-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	background: #FFFFFF;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.add-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(135deg, #98E4D6 0%, #7FCDCD 100%);
	color: #FFFFFF;
	border-radius: 24rpx;
	font-size: 30rpx;
	font-weight: 700;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-icon {
	font-size: 40rpx;
	margin-right: 10rpx;
}

/* 弹窗 */
.popup-content {
	height: 80vh;
	display: flex;
	flex-direction: column;
}

.popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 2rpx solid #F0F0F0;
}

.popup-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #333333;
}

.close-btn {
	font-size: 40rpx;
	color: #999999;
	padding: 0 10rpx;
}

.form-scroll {
	flex: 1;
	padding: 30rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.label {
	font-size: 28rpx;
	color: #333333;
	font-weight: 600;
	display: block;
	margin-bottom: 15rpx;
}

.required {
	color: #FF4444;
}

.input, .select-input {
	width: 100%;
	height: 80rpx;
	background: #F5F5F5;
	border-radius: 20rpx;
	padding: 0 25rpx;
	font-size: 28rpx;
}

.textarea {
	width: 100%;
	min-height: 150rpx;
	background: #F5F5F5;
	border-radius: 20rpx;
	padding: 20rpx 25rpx;
	font-size: 28rpx;
}

.char-count {
	font-size: 22rpx;
	color: #999999;
	text-align: right;
	display: block;
	margin-top: 10rpx;
}

/* 头像上传 */
.avatar-upload {
	width: 180rpx;
	height: 180rpx;
}

.avatar-preview {
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
}

.avatar-placeholder {
	width: 100%;
	height: 100%;
	background: #F5F5F5;
	border-radius: 20rpx;
	border: 2rpx dashed #CCCCCC;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.upload-icon {
	font-size: 48rpx;
	margin-bottom: 10rpx;
}

.upload-text {
	font-size: 24rpx;
	color: #999999;
}

/* 单选组 */
.radio-group {
	display: flex;
	gap: 30rpx;
}

.radio-item {
	display: flex;
	align-items: center;
	padding: 15rpx 30rpx;
	background: #F5F5F5;
	border-radius: 20rpx;
	border: 2rpx solid transparent;
}

.radio-item.active {
	background: rgba(255, 182, 193, 0.15);
	border-color: #FFB6C1;
}

.radio-icon {
	font-size: 28rpx;
	margin-right: 10rpx;
}

.radio-text {
	font-size: 28rpx;
	color: #666666;
}

.radio-item.active .radio-text {
	color: #FFB6C1;
	font-weight: 600;
}

/* 底部占位 */
.bottom-placeholder {
	height: 100rpx;
}

/* 弹窗底部 */
.popup-footer {
	display: flex;
	gap: 20rpx;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	border-top: 2rpx solid #F0F0F0;
}

.cancel-btn {
	flex: 1;
	height: 90rpx;
	background: #F5F5F5;
	color: #666666;
	border-radius: 24rpx;
	font-size: 28rpx;
	font-weight: 600;
	border: none;
}

.submit-btn {
	flex: 2;
	height: 90rpx;
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	color: #FFFFFF;
	border-radius: 24rpx;
	font-size: 28rpx;
	font-weight: 700;
	border: none;
}
</style>
